/*
 * @Author: wangtao
 * @Date: 2020-10-20 16:13:12
 * @LastEditors: kanglang
 * @LastEditTime: 2021-03-18 12:50:59
 * @Description: file content
 */
import React, { Component, Fragment } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableOpacity,
  PixelRatio,
  Alert,
} from 'react-native';
import { msg } from '@/common';
import {
  fontColorBlack,
  fontColorDeepGray,
  fontColorLightGray,
  fontColorSecDeepGray,
  mainBgColorWhite,
  px2dp,
  screenWidth,
  splitLineColorLightGray,
} from '@/styles';
import {
  iconBlackRight,
  iconDriverUser,
  iconTruckGray,
  iconError,
  iconProcessing,
  iconRightSmall,
  iconWait,
  iconRightGray,
  carHosting,
  carFranchaise,
  carCertificating,
  iconLegal,
  carLease,
  modifying
} from '@/images';

export default class CarItem extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { item } = this.props;

    return (
      <TouchableOpacity
        style={styles.container}
        activeOpacity={0.8}
        onPress={this.goToNext}
      >
        <View style={styles.itemTop}>
          <View style={styles.titleWrap}>
            <Image
              source={this.carStatusIcon(item)}
              resizeMode='stretch'
              style={styles.carStatus}
            />
            <Text style={styles.title}>{item.carNo}</Text>
            <Image
              source={iconBlackRight}
              resizeMode='stretch'
              style={styles.titleImg}
            />
          </View>
          <View style={styles.detailWrap}>
            {
              item.legalName && item.isJieyue !== 1 &&
              <>
                <View style={styles.legalBox}>
                  <Image
                    source={iconLegal}
                    resizeMode='stretch'
                    style={styles.detailImg}
                  />
                  <Text style={styles.detailText}>{item.legalName}</Text>
                </View>
                <Text style={[styles.line]}>|</Text>
              </>
            }
            <>
              <Image
                source={iconTruckGray}
                resizeMode='stretch'
                style={styles.detailImg}
              />
              <Text style={styles.detailText}>
                {item.cooperationTypeStr}
              </Text>
            </>
          </View>
          <Image
            // source={carFranchaise}
            source={this.carTypeIcon(item)}
            resizeMode='stretch'
            style={styles.statusImg}
          />
        </View>
      </TouchableOpacity>
    );
  }

  // 车辆状态图标
  carStatusIcon = (item) => {
    // 审核状态：1审核中 2 审核通过,3审核不通过
    if (item.auditingState == 1) {
      return iconProcessing;
    } if (item.auditingState == 2) {
      return iconRightSmall;
    } if (item.auditingState == 3) {
      return iconError;
    }
  }

  // 车辆类型图标
  carTypeIcon = (item) => {
    // PROPRIETARY(1, "自营"),
    // PARTICIPATE(2, "加盟"),
    // RELY(3, "挂靠"),
    // SOCIOLOGY(4, "社会车辆");

    switch (item.cooperationType) {
    case 1:
      return carFranchaise;
    case 2:
      return carFranchaise;
    case 3:
      return carHosting;
    case 4:
      return carFranchaise;
    default:
      return {};
    }
  }

  // 跳转
  goToNext = () => {
    const { item } = this.props;
    // 车辆认证进度 0 上传证件 1 签订合同 2安装设备 3完成入驻
    if (item.process == 2 || item.process == 3) {
      msg.emit('router: goToNext', {
        routeName: 'OwnerCarDetail',
        routerFrom: 'CarOwnerTruckList',
        data: item
      });
    } else {
      msg.emit('router: goToNext', {
        routeName: 'TruckCert',
        routerFrom: 'CarOwnerTruckList',
        data: item,
        type: 'view',
      });
    }
  };
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: mainBgColorWhite,
    width: px2dp(702),
    borderRadius: px2dp(16),
    marginTop: px2dp(24),
    paddingLeft: px2dp(24),
  },
  itemTop: {
    paddingVertical: px2dp(24),
    justifyContent: 'space-between',
    height: px2dp(192),
    // borderBottomWidth: 1 / PixelRatio.get(),
    // borderColor: splitLineColorLightGray,
  },
  titleWrap: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  title: {
    fontSize: px2dp(36),
    color: fontColorBlack,
    fontWeight: 'bold',
  },
  titleImg: {
    width: px2dp(26),
    height: px2dp(26),
  },
  detailWrap: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  detailImg: {
    width: px2dp(30),
    height: px2dp(30),
  },
  detailText: {
    fontSize: px2dp(26),
    color: fontColorLightGray,
    marginLeft: px2dp(4),
  },

  itemBottom: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row',
  },
  itemBottomItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: px2dp(16),
  },
  itemBottomText: {
    fontSize: px2dp(26),
    color: fontColorDeepGray,
    marginLeft: px2dp(4),
  },
  splitImg: {
    width: px2dp(20),
    height: px2dp(20),
    marginRight: px2dp(16),
  },
  statusImg: {
    width: px2dp(192),
    height: px2dp(110),
    position: 'absolute',
    bottom: 0,
    right: 0,
  },
  line: {
    height: px2dp(26),
    width: px2dp(1),
    backgroundColor: '#D8D8D8',
    marginHorizontal: px2dp(16)
  },
  legalBox: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  carStatus: {
    width: px2dp(44),
    height: px2dp(44),
    marginRight: px2dp(12)
  }
});
